define('admin/js/mod/posts/List', [
    'utils/fetchEnhancer',
    'utils/Time',
    'utils/helpers',
    'editorenhancer/myalbum/MyAlbum',
    'editorenhancer/insertarticle/InsertArticle'], (fetch, Time, helpers, MyAlbum, InsertArticle) => {

Vue.use(ELEMENT, { zIndex: 100 });
Vue.prototype.Time = Time;

const XEditor = window.XEditor;

XEditor.registerWidgetController('myalbum', MyAlbum);
XEditor.registerWidgetController('insertarticle', InsertArticle);

const List = {
    data: function() {
        return {
            formDataBasic: {},
            formDataDetail: {},
            editBasicDialogVisible: false,
            editDetailDialogVisible: false,
            list: null,
            total: 0,
            pageSize: 10,
            current: 1
        }
    },
    methods: {
        fetchList: function(page) {
            let _self = this;

            fetch('/adminapi/listposts?page=' + page).then(function(json){
                if(0 === json.status) {
                    _self.total = parseInt(json.data.total, 10);
                    _self.pageSize = parseInt(json.data.page_size, 10);
                    _self.current = parseInt(json.data.current, 10);
                    _self.list = json.data.data;
                }
            });
        },
        pageChange: function(p) {
            this.fetchList(p);
        },
        handleTableClick: function(e) {
            let _self = this;
            let t = e.target;
            let role = t.getAttribute('data-role');
            let id = t.getAttribute('data-id');

            if('editBasics' === role) {
                fetch('/adminapi/getarticlebasic?id=' + id).then((json) => {
                    if(0 === json.status) {
                        _self.formDataBasic = json.data.data;
                        _self.editBasicDialogVisible = true;
                    }
                });
                return;
            }

            if('editDetail' === role) {
                fetch('/adminapi/getarticledetail?id=' + id).then((json) => {
                    if(0 === json.status) {
                        _self.formDataDetail = json.data.data;
                        _self.editDetailDialogVisible = true;
                    }
                });
            }
        },
        doEditBasic: function() {
            let _self = this;
            let ret = helpers.json2Query(this.formDataBasic);
            let url = '/adminapi/editarticlebasic';

            fetch(url, {
                method: 'POST',
                body: ret
            }).then(function(json){
                if(0 === json.status) {
                    _self.formDataBasic = {},
                    _self.editBasicDialogVisible = false;
                    _self.fetchList(_self.current);

                    _self.$message.success('操作成功');
                } else {
                    _self.$message.error('操作失败');
                }
            });
        },
        doEditContent: function() {
            let _self = this;
            let ret = 'id=' + this.formDataDetail.id
                + '&content=' + encodeURIComponent(this.editor.getContent());

            fetch('/adminapi/editarticledetail', {
                method: 'POST',
                body: ret
            }).then((json) => {
                if(0 === json.status) {
                    _self.formDataDetail = {};
                    _self.editDetailDialogVisible = false;

                    _self.$message.success('操作成功');

                } else {
                    _self.$message.error('操作失败');
                }
            });
        },
        afterShowEditContent: function() {
            this.editor = new XEditor({
                autoFocus: false,
                widgets: ['bold', 'blockquote', '-', 'myalbum', 'insertarticle'],
                minHeight: '400',
                contentClassName: 'x-richcontent'
            });
            this.editor.render(document.getElementById('richcontent'));
            this.editor.setContent(this.formDataDetail.content);
        },
        beforeCloseEditContent: function(done) {
            this.editor.destroy();
            done();
        }
    },
    mounted: function() {
        this.fetchList(1);
    },
    created: function() {
        this.editor = null;
    },
    template:
`<div>
    <table class="x-table" @click="handleTableClick">
        <tr>
            <th>id</th>
            <th>uid</th>
            <th>标题</th>
            <th>缩略图</th>
            <th>是否推荐</th>
            <th>状态</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        <template v-if="list && list.length">
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.uid }}</td>
                <td><a class="x-table-cursor-text" target="_blank" :href="'/posts/'+item.id">{{ item.title }}</a></td>
                <td><img :src="item.thumb" width="100"/></td>
                <td>{{ item.is_recommend === '1' ? '是' : '否' }}</td>
                <td>{{ item.status === '0' ? '审核中' : (item.status === '2' ? '已删除' : '正常') }}</td>
                <td>{{ Time.format('y-m-d h:i', item.post_time * 1000) }}</td>
                <td>
                    <span class="x-table-cursor-text" data-role="editBasics" :data-id="item.id">修改基本信息</span>
                    <span class="x-table-cursor-text" data-role="editDetail" :data-id="item.id">修改内容</span>
                </td>
            </tr>
        </template>
    </table>

    <div style="margin-top: 10px; text-align: right">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChange"
            :current-page="current"
            :page-size="pageSize"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog title="修改基本信息" :visible.sync="editBasicDialogVisible">
        <el-form :model="formDataBasic">
            <el-form-item label="id" label-width="100px">
                <el-input :disabled="true" v-model="formDataBasic.id"></el-input>
            </el-form-item>
            <el-form-item label="分类id" label-width="100px">
                <el-input v-model="formDataBasic.cate_id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否推荐" label-width="100px">
                <el-switch
                    v-model="formDataBasic.is_recommend"
                    active-value="1"
                    inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="标题" label-width="100px">
                <el-input v-model="formDataBasic.title" maxlength="100" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="简介" label-width="100px">
                <el-input v-model="formDataBasic.brief" maxlength="200" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="100px">
                <template>
                    <el-radio v-model="formDataBasic.status" label="0">审核中</el-radio>
                    <el-radio v-model="formDataBasic.status" label="1">正常</el-radio>
                    <el-radio v-model="formDataBasic.status" label="2">删除</el-radio>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="editBasicDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="doEditBasic">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改内容" style="z-index:500" @opened="afterShowEditContent" :before-close="beforeCloseEditContent" :visible.sync="editDetailDialogVisible">
        <div id="richcontent"></div>
        <div slot="footer">
            <el-button @click="editDetailDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="doEditContent">确定</el-button>
        </div>
    </el-dialog>
</div>`
};

return List;

});
